<template>
<div>
  <van-nav-bar
  title="选择城市"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="city">
<van-row type="flex">
  <van-col >当前城市:<span>郑州市</span></van-col>
</van-row>
</div>
<div class="citys">
<van-row type="flex">
  <van-col >定位城市</van-col>
</van-row>
<van-row type="flex">
  <van-col style="width:60px;height:30px;border:1px solid #ccc;text-align:center;line-height:30px;margin-top:10px;font-size:12px"><van-icon name="location-o" color=#FF9800 />上海市</van-col>
</van-row>
</div>
<div class="hot">
<van-row type="flex">
  <van-col style="margin-bottom:10px" >热门城市</van-col>
</van-row>
<div class="list">
<span>成都</span>
<span>北京</span>
<span>武汉</span>
<span>广州</span>
<span>西安</span>
<span>杭州</span>
<span>上海</span>
<span>三亚</span>
<span>厦门</span>
</div>
</div>
<div class="lists">
<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />
    <van-index-anchor index="C" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" /> 
<van-index-anchor index="D" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />  
</van-index-bar>
</div>
</div>
</template>

<script>
export default {
        methods:{
        onClickLeft() {
            this.$router.go(-1)
    },
    }
}
</script>
<style>
.city{
    width: 430px;
    height: 50px;
    margin: 10px auto ;
    border-bottom: 1px solid #ccc
}
.city span {
    font-size: 24px;
    font-weight: bold
}
.citys{
    width: 430px;
    height:80px;
    margin: 10px auto ;
}
.hot{
    width: 430px;
    height:180px;
    margin: 10px auto ;
}
.list{
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}
.list span {
    display: inline-block;
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    text-align:center;
    line-height: 32px;
    margin-bottom: 20px;
    
}
.lists{
    display: flex;
    overflow: hidden;
    overflow: auto;
    margin-top: 20px
}

</style>
